<template>
  <div ref="dom" class="charts chart-line"></div>
</template>

<script>
import echarts from 'echarts'
import tdTheme from './theme.json'
echarts.registerTheme('tdTheme', tdTheme)
export default {
  name: 'ChartRing',
  props: {
    text: String,
    value: Number,
    max: Number
  },
  watch: {
    'value':function(newVal,oldVal){
      this.changeChart()
    }
  },
  mounted () {
    this.changeChart()
  },
  methods:{
    changeChart(){
      this.$nextTick(() => {
        let values = ((this.value/this.max).toFixed(2))*100;
        let option = {
          title: {
            text:this.value+this.text,
            x: 'center',
            y: 'center',
            textStyle: {
                fontWeight: 'normal',
                color: '#0580f2',
                fontSize: '24'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{b}<br/>{c}'
            },
            toolbox: {
                show: true,
                orient: 'vertical',
                left: 'right',
                top: 'center',
                feature: {
                    dataView: {show: true,readOnly: false},
                }

            },
        },
        color: ['rgba(176, 212, 251, 1)'], 
        series: [{
            name: 'Line 1',
            type: 'pie',
            clockWise: true,
            radius: ['50%', '66%'],
            itemStyle: {
                normal: {
                    label: {
                        show:false
                    },
                    labelLine: {
                        show: false
                    }
                }
            },
            hoverAnimation: false, 
            data: [{
                value:values,
                name: '01',
                itemStyle: {
                    normal: {
                        color: { // 完成的圆环的颜色
                            colorStops: [{
                                offset: 0,
                                color: '#00cefc' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: '#367bec' // 100% 处的颜色
                            }]
                        },
                        label: {
                            show: true,
                            // formatter : function (params){
                            //     return 100 - params.value + '%'
                            // },
                        },
                        labelLine: {
                            show: false
                        }
                    } 
                }
            }, {
                name: '02',
                value: 100-values
            }]
        }]
        }
        let dom = echarts.init(this.$refs.dom, 'tdTheme')
        dom.setOption(option)
      })
    }
  }
}
</script>

<style lang="less">

</style>
